<template>
  <div class="app-container documentation-container">
     <div  style="margin-bottom: 30px;">
         <div style=""><strong>我的作品</strong></div>
      </div>

   <div class="uploadbtn" @click="touploader">再上传一幅作品</div>

<div class="piclist">

  <div class="picarea" v-for="(item,index) in imageList" :key="index">

  <div class="picitem"> 
     <!-- <van-image
      width="150px"
      height="150px"
      fit="cover"
      lazy-load
     :src="item.itempic"
    /> -->
    <img  
      width="150px"
      height="150px"  
      :src="item.itempic" />
    <div class="picname">{{item.title}}</div>
  </div>

  </div>

</div>


</div>
</template>

<script>
import DropdownMenu from '@/components/Share/DropdownMenu'
import { mapGetters } from 'vuex'
import {Circle, Popup,Field,Cell, CellGroup,Picker,Tag,Lazyload,ImagePreview } from 'vant'

import Vue from 'vue'
import { Image } from 'vant';
Vue.use(Image).use(Field).use(Cell).use(CellGroup).use(Picker).use(Tag).use(Lazyload).use(ImagePreview);

import { Uploader } from 'vant'
Vue.use(Uploader);
import digitaSign from '@/components/page/case/digitaSign';
 Vue.use(Circle);
Vue.use(Popup)

import { getitems} from "@/api/user";

export default {
  name: 'Documentation',
  components: { DropdownMenu },
    computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles',
      'cardname',
      'introduction'
    ])
  },
  data() {
    return {
      picindex:0,
      picshow: false,
      showimges:[],
        colorvalue:0,
        indexid:null,
         value: '',
      showPicker: false,
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
        pictitle:null,
        picdesc:null,
        picname:null,
        picurl:null,
      havesign:false,
      popcontent:null,
      sign:false,
      show2:false,
      show:false,
       currentRate:0,
            rate:100,
            rate2:2,
            text:'',
        uploadImage5: require('@/assets/images/case/signname.png'),
        imageList: [
        {id:0,url:'http://hilongjw.github.io/vue-lazyload/dist/avatar/test3.jpg',name:"我的猫"},
        {id:1,url:'http://hilongjw.github.io/vue-lazyload/dist/avatar/test1.jpg',name:"我的猫"},
        {id:2,url:'http://hilongjw.github.io/vue-lazyload/dist/avatar/test2.jpg',name:"我的猫"},
        {id:3,url:'http://hilongjw.github.io/vue-lazyload/dist/avatar/test4.jpg',name:"我的猫"},
        {id:4,url:'http://hilongjw.github.io/vue-lazyload/dist/avatar/test7.jpg',name:"我的猫"},
        {id:5,url:'http://hilongjw.github.io/vue-lazyload/dist/avatar/test6.jpg',name:"我的猫"},
        {id:6,url:'http://hilongjw.github.io/vue-lazyload/dist/avatar/test8.jpg',name:"我的猫"},
        {id:7,url:'http://hilongjw.github.io/vue-lazyload/dist/avatar/test10.jpg',name:"我的猫"},
        {id:8,url:'http://hilongjw.github.io/vue-lazyload/dist/avatar/test11.jpg',name:"我的猫"},
        {id:9,url:'http://hilongjw.github.io/vue-lazyload/dist/avatar/test9.jpg',name:"我的猫"}
      ],

    }
  },
  components:{
digitaSign

  },
  mounted(){

this.getitems();
  },
  methods:{
    getitems(){
  getitems().then(res => {
                  if(res.code==200)
                  {
                     this.imageList=res.result;
                  }else
                  {
                       
                 this.$toast("服务器异常" );
                  }
    

        
          },
          err=>{
              
          }
          );


    },
touploader(){
  this.$router.push({path:'/files/zuopinuploader'})

},

      onchangeit(item,color){
          if(color=="#969799"){
              item.color="#1989fa"; 
          }else if(color=="#1989fa"){
              item.color="#969799";
          }

          

      },
      onConfirm2(){
          this.show=false;

      },
onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
      // 返回布尔值
    beforeRead(file) {
      if (file.type !== 'image/jpeg') {
        Toast('请上传 jpg 格式图片');
        return false;
      }
    
      return true;
    },

    // 返回 Promise
    asyncBeforeRead(file) {
      return new Promise((resolve, reject) => {
        if (file.type !== 'image/jpeg') {
          Toast('请上传 jpg 格式图片');
          reject();
        } else {
          resolve();
        }
      });
    },

      afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.picname=file.file.name;
      this.picurl=file.content;
      console.log("-------------------------------------------------------");
       console.log(file);
    //   console.log(this.picname);
    //   console.log(this.picurl);
      this.showPopup();
    },


     showPopup() {
            this.show = true;
    },
getimgsrc(data){
      
      this.havesign=true;
       this.uploadImage5=data;
       
      //  console.log("我的图片的地址："+this.imgsrc);
       this.show2 = false;
  

     },
     tijiao()
     {
        if(this.havesign)
            this.uploadqianming(this.uploadImage5);
            else
            this.$toast('您还未签名')
     },
       uploadqianming(base64str){
      
        this.uploadtag=9;
       this.UpladFile(null,base64str);
    },
     UpladFile(fileObj,base64str) {
            // var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
              var form = new FormData(); // FormData 对象
            var isbase64=0;
            // console.log('base64str:'+base64str)
            //  console.log('fileobj:'+fileObj)
            if(base64str)
                  isbase64=1;
            var url =  "/dev-api/mapi/customer/uploadsign" // 接收上传文件的后台地址
            if(fileObj)
            {
          
            form.append("file", fileObj); // 文件对象
            }
            else{
              var dataurl=base64str;
     var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
    u8arr[n] = bstr.charCodeAt(n);
}
var obj = new Blob([u8arr], {type:mime});
 
form.append("file", obj,"xysign.png");
            }


            this.xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
            this.xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
            this.xhr.onload = this.uploadComplete; //请求完成
            this.xhr.onerror =  this.uploadFailed; //请求失败
         var _this=this;
            this.xhr.upload.onprogress = this.progressFunction;//【上传进度调用方法实现】
            this.xhr.upload.onloadstart = function(){//上传开始执行方法
              // var  ot = new Date().getTime();   //设置上传开始时间
              //  var  oloaded = 0;//设置上传开始时，以上传的文件大小为0
              _this.show=true;
              // _this.$loadingshow();
              _this.rate=100;
              _this.currentRate=0;
              _this.text='';
               
               
            };

            this.xhr.send(form); //开始上传，发送form数据

        },
   //上传成功响应
          uploadComplete(evt) {
            //服务断接收完文件返回的结果
               this.show=false;
               this.$loadingclose();
            var data = JSON.parse(evt.target.responseText);
            // console.log('服务器响应')
            console.log(data)
            if(data.success) {
              console.log('上传成功')
                this.$toast("签约成功！");
                this.sign=true;
                sessionStorage.setItem('signpic',data.result)
                // this.uploadImage5=data.result;
                // this.uploadsuccess(data.result);
            }else{
                this.$toast(data.message);
            }

        },
        //上传失败
          uploadFailed(evt) {
                 this.show=false;
                  this.$loadingclose();
            this.$toast("上传失败！");
        },
        //取消上传
          cancleUploadFile(){
                 this.show=false;
                  this.$loadingclose();
            this.xhr.abort();
        },

  //上传进度实现方法，上传过程中会频繁调用该方法
          progressFunction(evt) {
            // var progressBar = document.getElementById("progressBar");
            // var percentageDiv = document.getElementById("percentage");
            // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
            if (evt.lengthComputable) {//
                // progressBar.max = evt.total;
                 // progressBar.value = evt.loaded;
                // this.rate=evt.total;
               
                this.currentRate = Math.round(evt.loaded / evt.total * 100);
               
                this.text = Math.round(evt.loaded / evt.total * 100) + "%";
                console.log(this.currentRate)
                  if(evt.loaded==evt.total)
                {
                   this.$loadingshow();
                }
            }
            else
            {
            
            }
             
        },

  }
}
</script>

<style lang="scss" scoped>
.documentation-container {
  // margin: 50px;
  .document-btn {
    float: left;
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
   .popstyle{
        width: 100%;
        height: 30%;
    }
        .tjzuopin{
      height: 40px;
    border-radius: 10px;
    background: cornflowerblue;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
    /* display: flex; */
    position: fixed;
    bottom: 10px;
    width: 90%;
    }
    .tagdiv{
  
    float: left;
    width: 100%;
    margin: 15px;
    }
    .picitem{
    height: 150px;
    width: 150px;
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .uploadbtn{
     width: 150px;
     height: 35px;
     background: #409eff;
     font-size: 14px;
     color: #fff;
     line-height: 35px;
     text-align: center;
     border-radius: 5px;
    }
    .piclist{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-top:30px;
      
    }
    .picarea{
      height: 200px;
          margin-bottom: 20px;
      width: 160px;
      margin-right: 20px;
      background: #fff;
       -moz-box-shadow: 1px 1px 2px #ececec;

   -webkit-box-shadow: 1px 1px 2px #ececec;

   box-shadow:1px 1px 2px #ececec;
    }
    .picname{
      font-size:14px;
      color:#3f3f3f;
      line-height: 20px;
      margin:5px;
    }
</style>
